<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图片预加载</title>
    <style>
        .box {
            text-align: center;
        }

        .btn {
            display: inline-block;
            height: 30px;
            line-height: 30px;
            border: 1px solid #ccc;
            background-color: #fff;
            padding: 0 10px;
            margin-right: 50px;
            color: #333;
        }

        a:link {
            text-decoration: none;
        }

        a:hover {
            background-color: #eee;
        }

        .loading {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: #eee;
            text-align: center;
            font-size: 30px;
        }

        .progress {
            margin-top: 300px;
        }
    </style>
</head>
<body>
<div class="box">
    <img src="http://shp.qpic.cn/ishow/2735052109/1590023037_84828260_14837_sProdImgNo_6.jpg/0" alt="pic" id="img" width="1200">
    <p>
        <a href="javascript:;" class="btn" data-control="prev">上一页</a>
        <a href="javascript:;" class="btn" data-control="next">下一页</a>
    </p>
</div>

<div class="loading">
    <p class="progress">0%</p>
</div>

<script src="js/jquery.min.js"></script>
<script src="js/preload.js"></script>
<script>
    /*var imgs = [
        'http://shp.qpic.cn/ishow/2735052109/1590023037_84828260_14837_sProdImgNo_6.jpg/0',
        'http://shp.qpic.cn/ishow/2735060319/1591183263_84828260_32676_sProdImgNo_6.jpg/0',
        'http://shp.qpic.cn/ishow/2735042809/1588039188_84828260_15570_sProdImgNo_6.jpg/0',
        'http://shp.qpic.cn/ishow/2735040117/1585734713_84828260_14703_sProdImgNo_6.jpg/0',
        'http://shp.qpic.cn/ishow/2735032409/1585014369_84828260_11705_sProdImgNo_6.jpg/0',
        'http://shp.qpic.cn/ishow/2735012115/1579591871_84828260_17614_sProdImgNo_6.jpg/0',
        'http://shp.qpic.cn/ishow/2735041709/1555463885_-695593207_22439_sProdImgNo_6.jpg/0',
        'http://shp.qpic.cn/ishow/2735041817/1555578488_-888937974_22758_sProdImgNo_6.jpg/0',
        'http://shp.qpic.cn/ishow/2735041923/1555686548_-888937974_18472_sProdImgNo_6.jpg/0',
        'http://shp.qpic.cn/ishow/2735052811/1559013341_587358052_30140_sProdImgNo_6.jpg/0',
        'http://shp.qpic.cn/ishow/2735022611/1551150435_-888937974_11511_sProdImgNo_6.jpg/0',
        'http://shp.qpic.cn/ishow/2735012213/1548136530_-695593207_9275_sProdImgNo_6.jpg/0',
        'http://shp.qpic.cn/ishow/2735012117/1548061598_704174346_15526_sProdImgNo_6.jpg/0',
        'http://shp.qpic.cn/ishow/2735012117/1548061233_587358052_15546_sProdImgNo_6.jpg/0',
        'http://shp.qpic.cn/ishow/2735012115/1548055013_-695593207_29388_sProdImgNo_6.jpg/0',
        'http://shp.qpic.cn/ishow/2735012115/1548055073_-695593207_32429_sProdImgNo_6.jpg/0',
        'http://shp.qpic.cn/ishow/2735011818/1547805944_-695593207_9824_sProdImgNo_6.jpg/0',
        'http://shp.qpic.cn/ishow/2735011117/1547197925_-888937974_22336_sProdImgNo_6.jpg/0',
        'http://shp.qpic.cn/ishow/2735010915/1547020063_-888937974_25739_sProdImgNo_6.jpg/0',
        'http://shp.qpic.cn/ishow/2735122915/1546067690_-888937974_14707_sProdImgNo_6.jpg/0',
        'http://shp.qpic.cn/ishow/2735122915/1546066860_-888937974_24682_sProdImgNo_6.jpg/0',
        'http://shp.qpic.cn/ishow/2735122815/1545982020_-888937974_31562_sProdImgNo_6.jpg/0',
        'http://shp.qpic.cn/ishow/2735122815/1545981285_-888937974_30782_sProdImgNo_6.jpg/0',
        'http://shp.qpic.cn/ishow/2735122815/1545980632_-888937974_1579_sProdImgNo_6.jpg/0',
        'http://shp.qpic.cn/ishow/2735122815/1545981192_-888937974_23607_sProdImgNo_6.jpg/0',
    ];

    var index = 0,
        len = imgs.length,
        count = 0,
        $progress = $('.progress');

    $.each(imgs, function (i, src) {
        var imgObj = new Image();

        $(imgObj).on('load error', function () {
            $progress.html(Math.round((count + 1) / len * 100) + '%');

            if (count >= len - 1) {
                $('.loading').hide();
                document.title = '1/' + len;
            }

            count++;
        });

        imgObj.src = src;
    });

    $('.btn').on('click', function () {
        if ('prev' === $(this).data('control')) {
            //上一张
            index = Math.max(0, --index);
        } else {
            //下一张
            index = Math.min(len - 1, ++index);
        }
        document.title = (index + 1) + '/' + len;
        $('#img').attr('src', imgs[index]);
    })*/



    var imgs = [
        'http://shp.qpic.cn/ishow/2735052109/1590023037_84828260_14837_sProdImgNo_6.jpg/0',
        'http://shp.qpic.cn/ishow/2735060319/1591183263_84828260_32676_sProdImgNo_6.jpg/0',
        'http://shp.qpic.cn/ishow/2735042809/1588039188_84828260_15570_sProdImgNo_6.jpg/0',
        'http://shp.qpic.cn/ishow/2735040117/1585734713_84828260_14703_sProdImgNo_6.jpg/0',
        'http://shp.qpic.cn/ishow/2735032409/1585014369_84828260_11705_sProdImgNo_6.jpg/0',
        'http://shp.qpic.cn/ishow/2735012115/1579591871_84828260_17614_sProdImgNo_6.jpg/0',
        'http://shp.qpic.cn/ishow/2735041709/1555463885_-695593207_22439_sProdImgNo_6.jpg/0',
        'http://shp.qpic.cn/ishow/2735041817/1555578488_-888937974_22758_sProdImgNo_6.jpg/0',
        'http://shp.qpic.cn/ishow/2735041923/1555686548_-888937974_18472_sProdImgNo_6.jpg/0',
        'http://shp.qpic.cn/ishow/2735052811/1559013341_587358052_30140_sProdImgNo_6.jpg/0',
        'http://shp.qpic.cn/ishow/2735022611/1551150435_-888937974_11511_sProdImgNo_6.jpg/0',
        'http://shp.qpic.cn/ishow/2735012213/1548136530_-695593207_9275_sProdImgNo_6.jpg/0',
        'http://shp.qpic.cn/ishow/2735012117/1548061598_704174346_15526_sProdImgNo_6.jpg/0',
        'http://shp.qpic.cn/ishow/2735012117/1548061233_587358052_15546_sProdImgNo_6.jpg/0',
        'http://shp.qpic.cn/ishow/2735012115/1548055013_-695593207_29388_sProdImgNo_6.jpg/0',
        'http://shp.qpic.cn/ishow/2735012115/1548055073_-695593207_32429_sProdImgNo_6.jpg/0',
        'http://shp.qpic.cn/ishow/2735011818/1547805944_-695593207_9824_sProdImgNo_6.jpg/0',
        'http://shp.qpic.cn/ishow/2735011117/1547197925_-888937974_22336_sProdImgNo_6.jpg/0',
        'http://shp.qpic.cn/ishow/2735010915/1547020063_-888937974_25739_sProdImgNo_6.jpg/0',
        'http://shp.qpic.cn/ishow/2735122915/1546067690_-888937974_14707_sProdImgNo_6.jpg/0',
        'http://shp.qpic.cn/ishow/2735122915/1546066860_-888937974_24682_sProdImgNo_6.jpg/0',
        'http://shp.qpic.cn/ishow/2735122815/1545982020_-888937974_31562_sProdImgNo_6.jpg/0',
        'http://shp.qpic.cn/ishow/2735122815/1545981285_-888937974_30782_sProdImgNo_6.jpg/0',
        'http://shp.qpic.cn/ishow/2735122815/1545980632_-888937974_1579_sProdImgNo_6.jpg/0',
        'http://shp.qpic.cn/ishow/2735122815/1545981192_-888937974_23607_sProdImgNo_6.jpg/0',
    ];

    var index = 0,
        len = imgs.length,
        $progress = $('.progress');

    $.preload(imgs,{
        each:function(count){
            $progress.html(Math.round((count + 1) / len * 100) + '%');
        },
        all:function(){
            $('.loading').hide();
            document.title = '1/' + len;
        }
    })

    $('.btn').on('click', function () {
        if ('prev' === $(this).data('control')) {
            //上一张
            index = Math.max(0, --index);
        } else {
            //下一张
            index = Math.min(len - 1, ++index);
        }
        document.title = (index + 1) + '/' + len;
        $('#img').attr('src', imgs[index]);
    })

</script>
</body>
</html>
